<template>
  <div class="scoreMoneyPage">
    <div class="scoreInfo bgfff">
      <div class="tabsBox">
        <el-tabs v-model="form.type" @tab-click="handleClick">
          <el-tab-pane label="系统积分" name="1"></el-tab-pane>
          <el-tab-pane label="荣誉积分" name="2"></el-tab-pane>
          <el-tab-pane label="垃圾积分" name="3"></el-tab-pane>
        </el-tabs>
        <div class="search" v-if="form.type == 1">
          <span class="item_lable">积分周期：</span>
          <el-date-picker
            size="small"
            v-model="year"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="scoreInfoMain" v-if="form.type == 1">
        <div class="scoreNum">
          <div>
            <span>积分预算总额</span>
            <span>{{ scoreStatic.disposi_penny }}</span>
          </div>
          <div>
            <span>账户余额</span>
            <span>{{ scoreStatic.residue_penny }}</span>
          </div>
          <div>
            <span>已发放积分</span>
            <span>{{ scoreStatic.expend_penny }}</span>
          </div>
        </div>
        <pieTu1 :echartsData="scoreStatic.award"> </pieTu1>
        <pieTu2 :echartsData="scoreStatic.cut"> </pieTu2>
      </div>
    </div>
    <div class="searchBox bgfff">
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名：" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话：" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.type == 1">
            <el-form-item label="消耗/获得：" prop="suadd">
              <el-select v-model="form.suadd" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option label="消耗" value="2"></el-option>
                <el-option label="获得" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.type == 1">
            <el-form-item label="相关模块：" prop="module_type">
              <el-select v-model="form.module_type" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="(item, key, index) in ScoreModuleList"
                  :key="index"
                  :label="item"
                  :value="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          style="
            display: flex;
            justify-content: flex-end;
            padding-right: 20px;
            margin-top: 20px;
          "
        >
          <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit"
              >查询</el-button
            >
            <el-button @click="resetForm('formRef')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <el-button type="primary" size="small" @click="export_PointMoney"
          >导出</el-button
        >
      </div>
      <el-table :data="tableData" border size="small" style="width: 100%">
        <!-- height="580" -->
        <el-table-column prop="_code" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column prop="userName" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="nickName" label="用户昵称" align="center" />
        <el-table-column prop="mobile" label="联系电话" align="center" />
        <el-table-column
          prop="suadd_txt"
          label="获得/消耗"
          align="center"
          v-if="form.type == 1 || form.type == 3"
        />
        <el-table-column
          prop="suadd_txt"
          label="获得"
          align="center"
          v-if="form.type == 2"
        />
        <el-table-column prop="point" label="积分数" align="center" />
        <el-table-column
          prop="module_type_txt"
          label="相关模块"
          align="center"
        />
        <el-table-column
          prop="remarks"
          label="积分内容"
          align="center"
          width="400"
        />
        <el-table-column
          prop="create_at"
          label="创建时间"
          align="center"
          width="200"
        />
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 50, 100, 500, 1000]"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import pieTu1 from "./common/pieTu1.vue";
import pieTu2 from "./common/pieTu2.vue";
import {
  getScoreStatistics,
  getScoreModuleType,
  getMoneyList,
  exportPointExcel,
} from "@/api/score";
export default {
  name: "",
  props: [""],
  data() {
    return {
      year: "",
      scoreStatic: {
        award: [],
        cut: [],
      },
      form: {
        type: "1",
        userName: "",
        mobile: "",
        suadd: "",
        module_type: "",
      },
      tableData: [],
      total: 0,
      ScoreModuleList: {},
    };
  },

  components: { pieTu1, pieTu2 },

  computed: {},

  beforeMount() {},

  mounted() {
    const myDate = new Date();
    this.year = myDate.getFullYear().toString();
    this.getScoreStatistics();
    this.getScoreModuleType();
    this.getList();
  },

  methods: {
    getScoreStatistics() {
      getScoreStatistics({
        year: this.year,
      }).then((res) => {
        if (res.code == 200) this.scoreStatic = res.data;
      });
    },
    getScoreModuleType() {
      getScoreModuleType().then((res) => {
        if (res.code == 200) this.ScoreModuleList = res.data;
      });
    },
    getList() {
      getMoneyList({ ...this.form, year: this.year }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.page.count;
        }
      });
    },
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    handleClick() {
      this.getScoreStatistics();
      this.getList();
    },
    export_PointMoney() {
      exportPointExcel(this.form).then((res) => {
        if (res.code == 200) {
          console.log(res.data.data, ">>>>>ASDADSDADSADSADAS----------");
          window.open(this.$resDomain + res.data.data.path);
        }
      });
    },
  },

  watch: {
    year: {
      handler(newval, oldval) {
        if (newval != oldval) {
          this.getList();
          this.getScoreStatistics();
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.scoreMoneyPage {
  .scoreInfo {
    margin-bottom: 14px;
    position: relative;
    padding: 15px 24px;
    .tabsBox {
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      .search {
        top: 15px;
        right: 24px;
        position: absolute;
        .item_lable {
          margin-right: 10px;
          color: #606266;
        }
        .el-input__inner {
          width: 300px;
        }
      }
    }

    .scoreInfoMain {
      display: flex;
      justify-content: space-between;
      padding-right: 30px;
      margin-top: 10px;
      .scoreNum {
        > div {
          padding: 0 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 14px;
          width: 249px;
          height: 58px;
          border: 1px solid #d4d4d4;
          color: #4f4f4f;
          span:last-child {
            color: #222;
          }
        }
      }
    }
  }
  .searchBox {
    margin-bottom: 14px;
    padding: 24px 24px 0;
    display: flex;
    flex-direction: column;
    height: 124px;

    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 220px;
      }
    }
  }
  .tablesCard {
  }
}
</style>
